<template>
    <section>
        <div class="square-box">
            <p>{{ComponentDiy.title}}<br>{{ComponentDiy.title2}}</p>
            <div class="box" v-for="(Item,index) in ComponentDiy.boxDataList" :key="index">
                <div :class="Item.class"></div><!--<i class="el-icon-delete istyle" ></i>--><!--图标-->
                <p class="font1">
                    <ICountUp style="font-size: 32px;"
                              :endVal="parseInt(indexData)"
                              :key="Math.random()"
                              @ready="onReady"
                    /><span>{{Item.tips}}</span></p>
                <p class="fff">{{Item.name}}</p>
            </div>
        </div>
    </section>
</template>

<script>

    import ICountUp from 'vue-countup-v2'
    export default {
        name: 'wioc-square-box',
        components: {
            ICountUp
        },
        props:['ComponentDiy','indexData',],
        data () {
            return {
           /* ComponentDiy:{
                    title:"行政服务中心",
                    title2:"今日服务动态",
                    boxDataList:[
                        {class:"wxqh",tips:"次",name:"线下取号1"},
                        {class:"bjl",tips:"次",name:"办件量2"},
                        {class:"sj",tips:"分钟",name:"平均办结时3"},
                        {class:"my",tips:"%",name:"满意度4"}
                    ],
                }*/
            }
        },
        mounted(){

        },
        methods: {
            onReady(instance, CountUp) {
             //   instance.update();
            },
        },
        watch:{
        }
    }

</script>
<style lang="less" scoped>
    .square-box{
        width: 220px;
        p{
            font-size: 36px;
            color: #2dfcff;
            text-align: center;
        }
      .box{
            width: 180px;height: 180px;
          //  height: 160px;
            background-color:rgba(45,252,255,0.1);
            border-radius: 20px;
            margin: 24px auto 0 auto;
            overflow: hidden;
            p{
                text-align: center;
                font-size: 32px;
                span{
                    font-size: 32px;
                    font-weight:bold;
                }
            }
            .font1{
                color: #fac702;
            }
            .fff{
                color: #ffffff;
            }
        }
    }
    .bjl{
        width: 39px;
        height: 41px;
        background-image: url('../img/bjl.png');
        margin: 16px auto 6px auto;
    }
    .my{
        width: 47px;
        height: 41px;
        background-image: url('../img/my.png');
        margin: 16px auto 4px auto;
    }
    .sj{
        width: 44px;
        height: 44px;
        background-image: url('../img/sj.png');
        margin: 16px auto 4px auto;
    }
    .wxqh{
        width: 44px;
        height: 41px;
        background-image: url('../img/wxqh.png');
        margin: 16px auto 4px auto;
    }
    .istyle{
        width: 44px;
        height: 41px;
        margin: 16px auto 4px auto;
        color: #ffffff;
    }
</style>
